<template>
  <div class="box">
    <div class="start">
      <div class="card">
        <div class="card_top">
          <span>{{ start.status }}</span>
        </div>
        <div class="card_main">
          <div>
            <span>{{ start.depName }}</span>
            <span v-if="start.name.length > 0">{{ start.name }}</span>
          </div>
        </div>
      </div>
      <div style="height: 4px;width: 30px;background-color: #7d8a98;"></div>
    </div>
    <!-- 中间主要数据 -->
    <div class="Data_card">
      <div v-for="item, i in Data" :key="i">
        <div style="height: 4px;flex: 1;background-color: #7d8a98;"></div>
        <div class="card" @click="CardClick(item)">
          <div class="card_top">
            <span>审批</span>
            <!-- 删除按钮 -->
            <i class="el-icon-close" v-if="item.name.length > 0" @click="DeleteClick(item)"></i>
          </div>
          <div class="card_main">
            <div>
              <span>{{ item.depName }}</span>
              <span v-if="item.name.length > 0">{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div style="height: 4px;flex: 1;background-color: #7d8a98;"></div>
        <!-- 新增按钮 -->
        <div class="Addcircle" @click="AddClick(item)" title="添加审核人" v-if="i == Data.length - 1">
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div>
    <div class="end">
      <div style="height: 4px;width: 30px;background-color: #7d8a98;"></div>
      <div class="card">
        <div class="card_top">
          <span>{{ end.status }}</span>
        </div>
        <div class="card_main">
          <div>
            <span>{{ end.depName }}</span>
            <span v-if="end.name.length > 0">{{ end.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      start: {
        status: "开始",
        depName: '审批流程开始',
        name: '',
      },
      end: {
        status: "结束",
        depName: '平台审批',
        name: '',
      },
    }
  },
  props: {
    Data: { // 回显的列表
      type: Array,
      default: () => {
        return [
        ]
      }
    },
  },
  methods: {
    CardClick(e) {
      console.log(e);
    },
    AddClick(e) {
      console.log(e);
      this.$emit('AddClick', e)
    },
    DeleteClick(e) {
      console.log(e, '删除的元素');
      this.$confirm('是否要删除该审核人?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('DeleteClick', e)
      }).catch(() => {
      });
    }
  },
}
</script>

<style lang="less" scoped>
.card {
  height: 100px;
  width: 200px;
  background-color: #7d8a98;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;

  .card_top {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    box-sizing: border-box;
    color: white;
    position: relative;

    .el-icon-close {
      position: absolute;
      right: 5px;
      top: 5px;
    }
  }

  .card_main {
    width: 100%;
    height: 70px;
    padding: 5px;
    box-sizing: border-box;

    >div {
      line-height: 14px;
      width: 100%;
      height: 100%;
      background-color: white;
      border-radius: 5px;
      color: black;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

    }
  }


}

.box {
  display: flex;

  .start {
    width: 230px;
    display: flex;
    align-items: center;
  }

  .Data_card {
    display: flex;

    >div {
      width: 260px;
      display: flex;
      align-items: center;
      position: relative;

      .Addcircle {
        cursor: pointer;
        width: 30px;
        height: 30px;
        background: #7d8a98;
        position: absolute;
        right: -16px;
        z-index: 10;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1000px;
      }
    }
  }

  .end {
    width: 230px;
    display: flex;
    align-items: center;
  }
}
</style>